import React, { useState } from "react";
import { Table, Button } from "antd";
import { useTranslation } from "react-i18next";
import { data } from "browserslist";

export const RegulationTask = React.forwardRef(({}, ref) => {
  const { t } = useTranslation();
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );
  const columns1 = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "left",
      className: "number-column",
      render: (text, record) => <div style={{paddingLeft:10}}>{text}</div>,
    },
    {
      title: t("dappIndexRegulation.token"),
      dataIndex: "b",
      key: "b",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.currentPrice"),
      dataIndex: "c",
      key: "c",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.realTimePosition"),
      dataIndex: "d",
      key: "d",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.positionValue"),
      dataIndex: "e",
      key: "e",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.newWeight"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.weightDown"),
      dataIndex: "g",
      key: "g",
      align: "center",
      render: (text, record) => <div className="down-text">{text}%</div>,
    },
    {
      title: t("dappIndexRegulation.salesRate"),
      dataIndex: "h",
      key: "h",
      align: "center",
      render: (text, record) => <div className="down-text">{text}</div>,
    },
  ];
  const dataSource1 = [
    {
      a: "1",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "4",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "5",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
  ];

  const columns2 = [
    {
      title: t("dappIndexRegulation.number"),
      dataIndex: "a",
      key: "a",
      align: "left",
      className: "number-column",
      render: (text, record) => <div style={{paddingLeft:10}}>{text}</div>,
    },
    {
      title: t("dappIndexRegulation.token"),
      dataIndex: "b",
      key: "b",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.currentPrice"),
      dataIndex: "c",
      key: "c",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.realTimePosition"),
      dataIndex: "d",
      key: "d",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.positionValue"),
      dataIndex: "e",
      key: "e",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.newWeight"),
      dataIndex: "f",
      key: "f",
      align: "center",
    },
    {
      title: t("dappIndexRegulation.weightAdd"),
      dataIndex: "g",
      key: "g",
      align: "center",
      render: (text, record) => <div className="up-text">{text}</div>,
    },
    {
      title: t("dappIndexRegulation.buyRate"),
      dataIndex: "h",
      key: "h",
      align: "center",
      render: (text, record) => <div className="up-text">{text}</div>,
    },
  ];
  const dataSource2 = [
    {
      a: "1",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "2",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "3",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "4",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
    {
      a: "5",
      b: "ETH",
      c: "20497.0419",
      d: "1.5473",
      e: "2971.4192U",
      f: "5.00%",
      g: "5.00%",
      h: "50.0000%",
    },
  ];

  return (
    <div className="regulation-task-comp">
      <div className="title-row">{t("dappIndexRegulation.taskTitle")}</div>
      <div className="scroll-box">
      <div className="table-box top-box">
        <div className="btn-row">
          <div className="top-btn">
            {t("dappIndexRegulation.salesBtn")}
          </div>
        </div>
        <Table
          pagination={false}
          size="small"
          borderd="false"
          columns={columns1}
          dataSource={dataSource1}
          scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
        ></Table>
      </div>
      <div className="table-box bottom-box">
        <div className="btn-row">
          <div className="bottom-btn">
            {t("dappIndexRegulation.buyBtn")}
          </div>
        </div>
        <Table
          pagination={false}
          size="small"
          borderd="false"
          columns={columns2}
          dataSource={dataSource2}
          scroll={deviceType == "Mobile" ? { x: "max-content" } : null}
        ></Table>
      </div>
      </div>
    </div>
  );
});
